<div class="conter_box active box_mail">
    <div class="bt-form">
        <!-- <div style="padding-bottom: 12px; margin-bottom: 18px; border-bottom: #ccc 1px dashed;">
            <div class="flex" style="align-item: center; height: 32px;">
                <span class="tname" style="width: 99px; line-height: 30px; padding-right: 20px; text-align: right;"><i class="total_tips">?</i>设为默认</span>
                <div>
                    <input class="btswitch btswitch-ios" id="default_setting" type="checkbox" />
                    <label style="position: relative;top: 5px;" class="btswitch-btn" for="default_setting"></label>
                </div>
            </div>
        </div> -->
        <div class="line">
            <div class="tab-nav recipient_nav relative">
                <span class="on" data-ctype="0" style="line-height: 30px;">Recipient setting</span>
                <span data-ctype="1" style="line-height: 30px;">Sender setting</span>
            </div>
        </div>
        <div class="line recipient_view">
            <div class="line relative">
                <textarea name="recipient_textarea" class="bt-input-text mr5" type="text" style="width: 300px; height:120px; line-height:20px"></textarea>
                <div class="placeholder c9 reci_tips" style="position: absolute;top: 25px;left: 25px; display:none">Fill in one email address per line, for example：<br>xxx@163.com<br>xxx@qq.com</div>
            </div>
            <button class="btn btn-success btn-sm recipient_submit" style="/* margin-left: 100px; */">Save</button>
        </div>
        <div class="line sender_view" style="display:none">
            <div class="line">
                <span class="tname">Sender Email</span>
                <div class="info-r">
                    <input name="sender_mail_value" class="bt-input-text mr5" type="text" style="width: 300px">
                </div>
            </div>
            <div class="line">
                <span class="tname">SMTP Password</span>
                <div class="info-r">
                    <input name="sender_mail_password" class="bt-input-text mr5" type="password" style="width: 300px">
                </div>
            </div>
            <div class="line">
                <span class="tname">SMTP Server</span>
                <div class="info-r">
                    <input name="sender_mail_server" class="bt-input-text mr5" type="text" style="width: 300px">
                </div>
            </div>
            <div class="line">
                <span class="tname">SMTP Port</span>
                <div class="info-r">
                    <input name="sender_mail_port" class="bt-input-text mr5" type="text" style="width: 300px">
                </div>
            </div>
            <button class="btn btn-success btn-sm sender_submit" style="margin-left: 125px;">Save</button>
            <ul class="help-info-text c7">
                <li>Recommended use port 465, and the protocol is SSL/TLS</li>
                <li>Port 25 is SMTP protocol, port 587 is STARTTLS protocol</li>
                <li>Not support Gmail, Outlook, Yahoo</li>
                <li><a href="https://www.bt.cn/bbs/thread-71298-1-1.html" target="_blank" class="btlink">Tutorial</a></li>
            </ul>
        </div>
    </div>
</div>
<style type="text/css">
.total_tips {
    border: 1px solid #cbcbcb;
    border-radius: 8px;
    color: #cbcbcb;
    cursor: pointer;
    display: inline-block;
    font-family: arial;
    font-size: 12px;
    font-style: normal;
    height: 14px;
    line-height: 14px;
    margin-right: 5px;
    text-align: center;
    width: 14px;
}
</style>
<!--邮箱模块-->
<script type="text/javascript">
    var mail = {
        all_mail_info: {},
        init: function () {
            var that = this;
            this.all_mail_info = $('.alarm-view .bt-w-menu p.bgw').data('data'); //设置全局数据
            this.gat_info();
            this.init_default();
            // 选项卡切换时
            $('.recipient_nav span').click(function () {
                var _type = $(this).attr('data-ctype');
                $(this).addClass('on').siblings().removeClass('on')
                switch (_type) {
                    case '0':
                        $('.recipient_view').show();
                        $('.sender_view').hide();
                        break;
                    case '1':
                        $('.recipient_view').hide();
                        $('.sender_view').show();
                        that.get_sender_data();
                        break;
                }
            })
            // 收件者保存按钮
            $('.recipient_submit').click(function () {
                that.recipient_submit();
            })
            // 发送者信息设置
            $('.sender_submit').click(function () {
                that.sender_submit();
            })

            // 设置默认
            $('#default_setting').change(function () {
                var _default = $(this).prop('checked');
                var _send = that.all_mail_info.data.send;
                if (!_send) {
                    layer.msg('Email sender settings not configured', { icon: 2 })
                    $(this).prop('checked', !_default);
                    return
                }
                var loadTs = layer.msg('Setting up Email configuration, please wait...', { icon: 16, time: 0, shade: [0.3, '#000'] });
                $.post('/config?action=set_default_channel&channel=mail', { default: _default }, function (res) {
                    layer.close(loadTs);
                    layer.msg(res.msg, { icon: res.status ? 1 : 2 })
                    if (res.status) that.refresh_data();
                });
            });

            var showTips = ''
            $('.total_tips').hover(function(){
                showTips = setTimeout(function(){
                    layer.tips('After setting as default, message notifications will be sent using this message channel first.', $('.total_tips'), {
                        tips: [1, '#20a53a'],
                        time: 0,
                        success:function(layero,indexs){
                            layero.css("left", $('.total_tips').offset().left - 10);
                    }})
                },200)
            },function(){
                clearTimeout(showTips)
                layer.closeAll('tips');
            })
        },
        /**
            *@description 获取邮箱信息、设置收件者提示语事件
        */
        gat_info: function () {
            var _tips = $('textarea[name=recipient_textarea]');
            var msg = ''
            if (!$.isEmptyObject(this.all_mail_info['data']['receive'])) {
                msg = mail.all_mail_info['data']['receive'] ? mail.all_mail_info['data']['receive'].join('\n') : ''
            }
            _tips.html(msg)
            // 设置收件者tips
            if (_tips.val() == '') $('.reci_tips.placeholder').show();
            $('.placeholder').click(function () { $(this).hide().siblings('textarea').focus() })
            _tips.focus(function () {
                $('.reci_tips.placeholder').hide()
            })
            _tips.blur(function () {
                _tips.val() == '' ? $('.reci_tips.placeholder').show() : $('.reci_tips.placeholder').hide()
            });
        },

        init_default: function () {
            var data = this.all_mail_info.data;
            if (!$.isEmptyObject(data)) {
                var _default = data.hasOwnProperty('default') ? data.default : false;
                $('#default_setting').prop('checked', _default);
            }
        },
        /**
            *@description 设置发送者信息
        */
        get_sender_data: function () {
            var that = this;
            var data = this.all_mail_info.data;

            if (!$.isEmptyObject(data) && !$.isEmptyObject(data.send)) {
                var send = data.send;

                var mail_ = send.qq_mail || '',
                    stmp_pwd_ = send.qq_stmp_pwd || '',
                    hosts_ = send.hosts || '',
                    port_ = send.port || '';

                $('input[name=sender_mail_value]').val(mail_)
                $('input[name=sender_mail_password]').val(stmp_pwd_)
                $('input[name=sender_mail_server]').val(hosts_)
                $('input[name=sender_mail_port]').val(port_)
            } else {
                $('input[name=sender_mail_port]').val('465')
            }
        },
        /**
            *@description 设置收件者邮箱，保存按钮
        */
        recipient_submit: function () {
            var that = this;
            var reci_ = $('textarea[name=recipient_textarea]').val();
            var loadTs = layer.msg('Please wait while the recipient email is being set...', { icon: 16, time: 0, shade: [0.3, '#000'] });
            $.post('/config?action=set_msg_config&name=mail', { mails: reci_ }, function (res) {
                layer.close(loadTs);
                layer.msg(res.msg, { icon: res.status ? 1 : 2 })
                if (res.status) that.refresh_data();
            })
        },
        /**
            *@description 设置发送者邮箱，保存按钮
        */
        sender_submit: function () {
            var that = this;
            var _email = $('input[name=sender_mail_value]').val(),
                _passW = $('input[name=sender_mail_password]').val(),
                _server = $('input[name=sender_mail_server]').val(),
                _port = $('input[name=sender_mail_port]').val();

            if (_email == '') return layer.msg('Email address cannot be empty！', { icon: 2 });
            if (_passW == '') return layer.msg('STMP password cannot be empty！', { icon: 2 });
            if (_server == '') return layer.msg('STMP server address cannot be empty！', { icon: 2 });
            if (_port == '') return layer.msg('Please enter valid port number', { icon: 2 });

            var loadTs = layer.msg('The Email notification is being generated, please wait...', { icon: 16, time: 0, shade: [0.3, '#000'] });
            $.post('/config?action=set_msg_config&name=mail', {
                send: 1,
                qq_mail: _email,
                qq_stmp_pwd: _passW,
                hosts: _server,
                port: _port
            }, function (rdata) {
                layer.close(loadTs);
                if (rdata.status) that.refresh_data();
                layer.msg(rdata.msg, { icon: rdata.status ? 1 : 2 });
            });
        },
        refresh_data: function () {
            var that = this
            $.post('/config?action=get_msg_configs', function (rdata) {
                $.each(rdata, function (key, item) {
                    var $el = $('.alarm-view .bt-w-menu .men_' + key);
                    if (item.data && item.data.default) {
                        $el.html($el.text() + '<span class="show-default"></span>');
                    } else {
                        $el.find('span').remove();
                    }
                    $('.alarm-view .bt-w-menu .men_' + key).data('data', item);
                    if (key === 'mail') {
                        that.all_mail_info = item;
                    }
                });
            })
        }
    }
</script>